<template>
	<div>
		<div id="main" style="width: 750px;height:400px;"></div>
	</div>
</template>

<script>
	import _ from 'loadsh'
	export default {
		// 组件名称
		name: 'demo',
		// 组件状态值
		data() {
			return {
				options: {
					title: {
						text: "用户来源",
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "cross",
							label: {
								backgroundColor: "#E9EEF3",
							},
						},
					},
					grid: {
						left: "3%",
						right: "4%",
						bottom: "3%",
						containLabel: true,
					},
					xAxis: [{
						boundaryGap: false,
					}, ],
					yAxis: [{
						type: "value",
					}, ],
				},
			};
		},
		async mounted() {
			// 基于准备好的dom，初始化echarts实例
			var myChart = this.$echarts.init(document.getElementById("main"));
			try {
				const data = await this.$apis.getReports();
				const result = _.merge(data.data1, this.options);
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(result);
			} catch (e) {
				console.log(e)
			}
		},
	}
</script>

<style scoped>

</style>
